<template>
  <div class="page">
    <!-- 顶部数据展示 -->
    <el-row class="row" :gutter="20">
      <el-col :span="6">
        <div class="div1">
          <div class="div2">
            <span class="span1">总销售额</span>
          </div>
          <div class="div3">
            <span style="font-size: 24px;">￥</span>
            <span class="span2">{{ allMoney }}</span>
          </div>
          <div class="div4">
            <span class="span3">日销售额：￥{{ dayMoney }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="div1">
          <div class="div2">
            <span class="span1">未支付订单数</span>
          </div>
          <div class="div3">
            <span class="span2">{{ allwzf }}</span>
          </div>
          <div class="div4">
            <span class="span3">日订单数：{{ daywzf }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="div1">
          <div class="div2">
            <span class="span1">未提货订单数</span>
          </div>
          <div class="div3">
            <span class="span2">{{ alldth }}</span>
          </div>
          <div class="div4">
            <span class="span3">日订单数：{{ daydth }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="div1">
          <div class="div2">
            <span class="span1">已提货订单数</span>
          </div>
          <div class="div3">
            <span class="span2">{{ allyth }}</span>
          </div>
          <div class="div4">
            <span class="span3">日订单数：{{ dayyth }}</span>
          </div>
        </div>
      </el-col>
    </el-row>



    <div class="div5">
      <el-row>
        <el-col :span="14">
          <span>销售额</span>
        </el-col>
        <el-col :span="2">
          <el-button text @click="click(1)">今日</el-button>
        </el-col>
        <el-col :span="2">
          <el-button text @click="click(2)">本周</el-button>
        </el-col>
        <el-col :span="2">
          <el-button text @click="click(3)">本月</el-button>
        </el-col>
        <el-col :span="2">
          <el-button text @click="click(4)">本年</el-button>
        </el-col>
        <el-col :span="2">
          <el-button text @click="click(5)">重置</el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="15">
          <div class="zhu" id="main">
          </div>
        </el-col>
        <el-col :span="9">
          <div class="rank-container">
            <h1>商品销售额排名</h1>
            <div class="rank-list">
              <div v-for="(item, index) in rank" :key="item.id" :class="['rank-item', getRankClass(index)]">
                <div class="rank-num">{{ index + 1 }}</div>
                <div class="rank-content">
                  <div class="rank-name">{{ item.aGoods.name || '暂无商品名' }}</div>
                  <div class="rank-money">{{ item.money.toLocaleString() || '0' }} 元</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

    </div>

    <div class="div7">
      <h3>项目功能：</h3>
      <el-row>
        <el-col :span="6">
          <h4>首页：</h4>
          <div><img src="http://122.51.84.231:9001/dianshang/首页.jpg" alt=""></div>
        </el-col>
        <el-col :span="6">
          <h4>商品分类：</h4>
          <div><img src="http://122.51.84.231:9001/dianshang/商品分类.jpg" alt=""></div>
        </el-col>
        <el-col :span="6">
          <h4>购物车：</h4>
          <div><img src="http://122.51.84.231:9001/dianshang/购物车.jpg" alt=""></div>
        </el-col>
        <el-col :span="6">
          <h4>我的：</h4>
          <div><img src="http://122.51.84.231:9001/dianshang/我的.jpg" alt=""></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <h4>登录：</h4>
          <div><img src="http://122.51.84.231:9001/dianshang/登录.jpg" alt=""></div>
        </el-col>
        <el-col :span="6">
          <h4>搜索：</h4>
          <div><img src="http://122.51.84.231:9001/dianshang/搜索.jpg" alt=""></div>
        </el-col>
        <el-col :span="6">
          <h4>在线支付：</h4>
          <div><img src="http://122.51.84.231:9001/dianshang/在线支付.jpg" alt=""></div>
        </el-col>
        <el-col :span="6">
          <h4>支付：</h4>
          <div><img src="http://122.51.84.231:9001/dianshang/支付.jpg" alt=""></div>
        </el-col>
      </el-row>
    </div>

    <div class="div8">
      <h3>我们的愿景：</h3>
      <div class="art-text">
        希望这个项目可以做毕设，并顺利通过答辩！！！
      </div>
      <h3>关于我们：</h3>
      <h4>参与人员：车干、土口、弓长</h4>
      <h4>车干：项目组长、大头、主力、一拖二👍</h4>
      <h4>土口、弓长:两条咸鱼🐟🐟</h4>
      <el-row>
        <el-col :span="8">
          <h3>感谢打赏：</h3>
          <img src="http://122.51.84.231:9001/dianshang/收款码.jpg" alt="">
        </el-col>
        <el-col :span="8">
          <h3>加入我们：</h3>
          <img src="http://122.51.84.231:9001/dianshang/群二维码.jpg" alt="">
        </el-col>
      </el-row>
    </div>


  </div>

</template>

<script setup lang="js">
import { getMoney, getNums, getRank } from "@/api/tool/index"
import * as echarts from 'echarts';
import { ref } from "vue";
import { onMounted } from 'vue';

const allMoney = ref(0);
const dayMoney = ref(0);
const allwzf = ref(0);
const daywzf = ref(0);
const alldth = ref(0);
const allyth = ref(0);
const daydth = ref(0);
const dayyth = ref(0);
const data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
const rank = ref([]);
const option = {
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      type: 'bar'
    }
  ]
};
const getRankClass = (index) => {
  if (index === 0) return 'first-place'; // 第一名
  if (index === 1) return 'second-place'; // 第二名
  if (index === 2) return 'third-place'; // 第三名
  return '';
};
onMounted(() => {
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  for (let i = 1; i <= 12; i++) {
    getBetweenMoney(getMonthStartAndEnd(i), i - 1);
  }
  // 延迟2秒执行
  setTimeout(() => {
    console.log(option);

    console.log(data);
    option && myChart.setOption(option);
  }, 2000);


})


//获取当年某月的一段日期
function getMonthStartAndEnd(month) {
  let year = new Date().getFullYear()
  // 获取某个月的开始日期（当月的第一天，0点0分0秒）
  let startDate = new Date(year, month - 1, 1);  // month 是从 0 开始，所以需要减 1
  startDate.setHours(0, 0, 0, 0);  // 设置时间为 0 点 0 分 0 秒

  // 获取某个月的结束日期（该月的最后一天，23点59分59秒）
  let endDate = new Date(year, month, 0);  // month+1 作为下一个月的第一天，0 是上一个月的最后一天
  endDate.setHours(23, 59, 59, 999);  // 设置时间为 23 点 59 分 59 秒

  return {
    startTime: startDate.toString(),
    endTime: endDate.toString()
  };
}
//获取销售总额
function getAllMoney() {
  getMoney().then(res => {
    allMoney.value = res.msg;
  })
}
//获取今日销售额
function getDayMoney() {
  let endTime = new Date();
  endTime.setDate(endTime.getDate() + 1); // 将当前日期加一天
  endTime.setHours(0, 0, 0, 0); // 设置时间为0点0分0秒
  let startTime = new Date();
  startTime.setHours(0, 0, 0, 0);
  getMoney({ startTime: startTime.toString(), endTime: endTime.toString() }).then(res => {
    dayMoney.value = res.msg;
  })
}
//获取某一段时间内的销售额
function getBetweenMoney(data1, i) {
  getMoney(data1).then(res => {
    data[i] = res.msg;
    option.series[0].data[i] = res.msg;
    return res.msg;
  })
}
//获取未支付订单总数
function allNums(status) {
  getNums({ status: status }).then(res => {
    if (status == 1) {
      allwzf.value = res.data;
    } else if (status == 2) {
      alldth.value = res.data;
    } else if (status == 3) {
      allyth.value = res.data;
    }

  })
}
//获取今日未支付订单总数
function dayNums(status) {
  let endTime = new Date();
  endTime.setDate(endTime.getDate() + 1); // 将当前日期加一天
  endTime.setHours(0, 0, 0, 0); // 设置时间为0点0分0秒
  let startTime = new Date();
  startTime.setHours(0, 0, 0, 0);
  getNums({ status: status, startTime: startTime.toString(), endTime: endTime.toString() }).then(res => {
    if (status == 1) {
      daywzf.value = res.data;
    } else if (status == 2) {
      daydth.value = res.data;
    } else if (status == 3) {
      dayyth.value = res.data;
    }
  })
}
//获取一段时间的排行榜
function getrank(data) {
  getRank(data).then(res => {
    rank.value = res.data;
  })
}
function click(index) {
  let startTime = new Date();
  let endTime = new Date();
  if (index == 1) {
    endTime.setDate(endTime.getDate() + 1); // 将当前日期加一天
    endTime.setHours(0, 0, 0, 0); // 设置时间为0点0分0秒
    startTime.setHours(0, 0, 0, 0);
  } else if (index == 2) {
    // 获取当前日期
    let today = new Date();
    // 获取今天是星期几（0 - 6，0是星期日，6是星期六）
    let day = today.getDay();
    // 计算当前周一的日期
    // 如果今天是周日（0），我们需要向前调整到周六（6）
    let diff = (day === 0 ? 6 : day - 1);
    // 通过当前日期创建一个新的日期对象，设置为本周周一的日期
    startTime = new Date(today);
    startTime.setDate(today.getDate() - diff); // 设置为本周周一
    startTime.setHours(0, 0, 0, 0); // 设置为当天的 00:00:00.000
    // 计算下周一的日期（当前周一 + 7 天）
    endTime = new Date(startTime);
    endTime.setDate(startTime.getDate() + 7); // 下周一就是当前周一 + 7 天
  } else if (index == 3) {
    // 获取当前日期
    let today = new Date();
    // 获取当前年份和当前月份
    let year = today.getFullYear();
    let month = today.getMonth(); // 注意：月份是从 0 开始的，0 是 1 月，11 是 12 月
    // 获取当前月一号的日期，设置时间为 0 点 0 分 0 秒
    startTime = new Date(year, month, 1);
    startTime.setHours(0, 0, 0, 0);
    // 获取下月一号的日期，设置时间为 0 点 0 分 0 秒
    endTime = new Date(year, month + 1, 1);
    endTime.setHours(0, 0, 0, 0);
  } else if (index == 4) {
    // 获取当前日期
    let today = new Date();
    // 获取当前年份
    let year = today.getFullYear();
    // 获取当前年一月一号的日期，设置时间为 0 点 0 分 0 秒
    startTime = new Date(year, 0, 1);
    startTime.setHours(0, 0, 0, 0);
    // 获取下年一月一号的日期，设置时间为 0 点 0 分 0 秒
    endTime = new Date(year + 1, 0, 1);
    endTime.setHours(0, 0, 0, 0);
  }else if(index == 5){
    getrank();
    return;
  }
  getrank({startTime:startTime.toString(),endTime:endTime.toString()});
}

getrank();
allNums(1);
allNums(2);
allNums(3);
dayNums(1);
dayNums(2);
dayNums(3);
getDayMoney();
getAllMoney();
</script>

<style lang="css" scoped>
.rank-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
}

.rank-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.rank-num {
  font-size: 24px;
  font-weight: bold;
  width: 50px;
  text-align: center;
}

.rank-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

.rank-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.rank-money {
  font-size: 18px;
  font-weight: 600;
  color: #1e90ff;
}

/* 特效：前三名的背景色和动画 */
.first-place {
  background: linear-gradient(135deg, #ffdf00, #ffbf00);
  box-shadow: 0 4px 15px rgba(255, 223, 0, 0.3);
}

.second-place {
  background: linear-gradient(135deg, #b8b8b8, #9a9a9a);
  box-shadow: 0 4px 15px rgba(186, 186, 186, 0.3);
}

.third-place {
  background: linear-gradient(135deg, #cd7f32, #b56a3f);
  box-shadow: 0 4px 15px rgba(205, 127, 50, 0.3);
}

.page {
  background-color: rgb(246, 245, 245);
  padding: 20px;
}

.div1 {
  width: 100%;
  background-color: white;
  border-radius: 10px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);
  padding-top: 10px;
}

.div2 {
  padding-left: 20px;
}

.div3 {
  padding-left: 20px;
  margin-bottom: 20px;
}

.div4 {
  height: 40px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  padding-top: 10px;
  border-top: 1px solid black;
}

.div5 {
  width: 100%;
  background-color: white;
  padding: 20px 50px 10px 40px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin-bottom: 20px;
}

.div6 {
  text-align: center;
  padding-top: 20px;
}

.div7 {
  width: 100%;
  padding-top: 10px;
  padding-left: 10px;
  margin-top: 20rpx;
  background-color: white;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin-bottom: 20px;
}

.div7 img {
  width: 80%;
  border-radius: 18px;
}

.div8 {
  width: 100%;
  /* height: 500px; */
  padding-top: 10px;
  padding-left: 10px;
  background-color: white;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin-bottom: 20px;
}

.div8 img {
  width: 25%;
  border-radius: 18px;
}

.span1 {
  font-size: 15px;
}

.span2 {
  font-size: 30px;
}

.row {
  margin-top: 20px;
}

.zhu {
  width: 100%;
  height: 650px;
  margin-left: -60px;
}

.art-text {
  font-size: 48px;
  font-weight: bold;
  background: linear-gradient(90deg, #ff6f61, #6a11cb, #34e89e, #ff6f61);
  background-size: 300% 300%;
  /* 放大背景以实现动画效果 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  animation: gradientAnimation 4s infinite linear;
  /* 动画效果 */
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
</style>
<style scoped></style>